<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--响应式（自适应）-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>h5表单</title>
    <meta charset="utf-8"/>
    <title>学生信息</title>
    <style type="text/css">
        fieldset {
            width: 260px;
            margin: 0 auto;
        }

        input {
            width: 250px;
            height: 30px;
        }

        i {
            font: 16px/30px arial;
        }

        #but {
            width: 255px;
            height: 38px;
            margin-top: 10px;
        }

        meter {
            width: 255px;
            height: 38px;
        }
    </style>
</head>
<body>
<fieldset>
    <legend>学生信息</legend>
    <form action="#" method="get">
        <i>姓名：</i><br/>
        <input type="text" placeholder="请输入姓名" autofocus="autofocus"/><br/>
        <i>手机号码：</i><br/>
        <input type="tel" maxlength="11" pattern="^1[3578]\d{9}$" name=""/><br/>
        <i>邮箱：</i><br/>
        <input type="email" required="required"/><br/>
        <i>所属学校：</i><br/>
        <input type="text" list="school"/><br/>
        <datalist id="school">
            <option value="华中农业大学"></option>
            <option value="武汉大学"></option>
            <option value="厦门大学"></option>
            <option value="清华大学"></option>
        </datalist>
        <i>入学成绩：</i><br/>
        <input type="number" min="0" id="num"/><br/>
        <i>基本水平：</i><br/>
        <meter min="0" max="100" low="70" high="90" id="met"></meter>
        <br/>
        <i>入学时间：</i><br/>
        <input type="date"/><br/>
        <i>毕业时间</i>：<br/>
        <input type="date"/><br/>
        <input type="submit" value="提交" id="but"/><br/>
    </form>
</fieldset>
<script type="text/javascript">
    var num = document.getElementById("num");
    var met = document.getElementById("met");
    num.oninput = function () {
        met.value = num.value;
    };
    /*(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);*/
</script>
</body>
</html>